<!--
 * @Author: zhangyun
 * @Date: 2021-04-23 09:09:50
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-25 11:00:50
 * @Desc: 
-->
<template>
  <transition name="fade">
    <div v-if="visible" class="dialog">
      <section
        class="bg-white fixed top-1/2 left-1/2 z-20 transform -translate-x-80 -translate-y-60 rounded shadow-lg transition"
        :class="[changeScreen(size)]"
      >
        <button
          class="h-6 bg-transparent rounded w-14 leading-6 text-2xl text-white mr-2 focus:outline-none absolute top-2 -right-16"
          @click="close"
        >
          <i class="iconfont icon-guanbi"></i>
        </button>
        <slot></slot>
      </section>
    </div>
  </transition>
</template>

<script>
import { defineComponent } from 'vue'
export default defineComponent({
  name: 'Dialog',
  emits: ['close', 'update'],
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    size: {
      type: String,
      default: 'default',
    },
  },
  setup(prop, { emit }) {
    function close() {
      // emit('update:visible', false)
      emit('close', false)
    }
    function changeScreen(size) {
      const sizes = {
        default: 'w-140 min-h-64',
        mini: 'w-96 h-64 min-h-64',
      }
      return sizes[size]
    }
    return { close, changeScreen }
  },
})
</script>

<style lang="scss" scoped>
.dialog::after {
  content: '';
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.6);
  z-index: 1;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0s ease;
}

.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
